<template>
  <view class="content">
    <view class="bg">
      <fui-lottie :width="1000" :height="800" :options="option" :action="action"></fui-lottie>
    </view>


    <view class="box">
      <!-- <view style="width: 100%;">
        <fui-button size="40" :bold="true" background="linear-gradient(to right, #a1c4fc, #998cf5)" width="100%"
          height="110rpx" radius="96rpx" open-type="getPhoneNumber" @getphonenumber="getPhoneAndLogin"
          style="letter-spacing: 10rpx;">一键登录</fui-button>
      </view> -->
      <view style="width: 100%;">
        <fui-button size="40" :bold="true" background="linear-gradient(to right, #a1c4fc, #426bd5)" width="100%"
                    height="110rpx" radius="96rpx" @getphonenumber="getPhoneAndLogin()" open-type="getPhoneNumber"
                    style="letter-spacing: 10rpx;">一键登录
        </fui-button>
      </view>
      <view class="tip-link">还没有账号?快来
        <text @click="gotoRegister">注册</text>
      </view>
    </view>
  </view>
</template>

<script>
import {
  sendSms,
  dySmsRegister,
  wxSmsRegister,
  wxAppletRegister
} from 'common/api'

const app = getApp()
export default {
  data() {
    return {
      windowHeight: app.windowHeight,
      option: {
        path: 'https://assistant.qmtruck.com/static/images/icon/bg.json'
      },
      action: 'play'
    }
  },
  methods: {
    getPhoneAndLogin(e) {
      console.log(e)
      let that = this;
      if (e.errMsg == "getPhoneNumber:ok") {
        uni.showModal({
          title: '授权登录',
          content: '确认用该手机号登录?',
          success: res => {
            if (res.confirm) {
              let data = {
                'encryptedData': e.encryptedData,
                'iv': e.iv,
                'inviteId': uni.getStorageSync('inviteId') ?? that.inviterUser
              };
              wxAppletRegister(data).then(res => {
                if (res.code == 200) {
                  that.$com.msg('登录成功~')
                  that.$store.commit('login', res.data)
                  that.$com.back()
                } else {
                  that.$com.msg(res.msg)
                }
              })
            } else {
              that.$com.msg('将无法获取您的信息并提供服务~')
            }
          }
        })

      } else {
        that.show = true
        this.$com.msg('将无法获取您的信息并提供服务~')
      }
    },
    // 去登录
    gotoLogin() {
      uni.navigateTo({
        url: '/pages/info/info'
      })
    },
    // 去注册
    gotoRegister() {
      // uni.navigateTo({
      // 	url: '/pages/login29/register'
      // })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #e0edfe;
}

.content {
  position: relative;
}


.bg {
  position: fixed;
  top: 15vh;
  left: calc(100% - 860rpx);
  width: 1000rpx;
  height: 800rpx;
  z-index: -1;
}

.box {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  position: fixed;
  left: 40rpx;
  right: 40rpx;
  bottom: 80rpx;

}

.login-btn {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 40rpx;
  letter-spacing: 10rpx;
  font-weight: bold;
  color: #FFFFFF;
  background-image: linear-gradient(to right, #a1c4fc, #998cf5);
  box-shadow: 0rpx 5rpx 30rpx #cabdf5;
  height: 110rpx;
  border-radius: 50rpx;
  width: 100%;
}

.tip-link {
  line-height: 120rpx;
  letter-spacing: 5rpx;
  font-size: 26rpx;

  text {
    padding-left: 10rpx;
    color: #007AFF;
  }

}
</style>